<div nz-row>
  <label
    nz-checkbox
    [ngModel]="isAllGranted()"
    [nzIndeterminate]="isIndeterminate()"
    [nzDisabled]="isAllDisabled()"
    (ngModelChange)="allSelectionToggle($event)"
  >
    授予所有权限
  </label>
</div>
<div nz-row class="main-row">
  <nz-card>
    <nz-tabset [nzTabPosition]="'left'">
      <nz-tab
        [nzTitle]="getTabTitle(group)"
        *ngFor="let group of permissionList?.groups; trackBy: trackByFn"
        (nzSelect)="onTabChanged(group)"
      >
        <div nz-row class="permission-title">
          <label
            nz-checkbox
            [ngModel]="isGroupAllGranted(group)"
            [nzIndeterminate]="isGroupIndeterminate(group)"
            [nzDisabled]="isGroupDisabled(group)"
            (ngModelChange)="groupSelectionToggle(group, $event)"
          >
            {{ group.displayName }}
          </label>
        </div>
        <div nz-row>
          <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
            <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
              <ng-container *ngIf="node.groupName === group.name">
                <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
                <nz-tree-node-checkbox
                  [nzDisabled]="node.disabled"
                  [nzChecked]="node.isGranted"
                  (nzClick)="selectionToggle(node)"
                ></nz-tree-node-checkbox>
                <nz-tree-node-option [nzDisabled]="node.disabled" (nzClick)="selectionToggle(node)">
                  {{ node.displayName }}
                  <label *ngFor="let provider of getProviders(node)" style="margin-left: 5px">
                    继承自：{{ provider.providerKey }}
                  </label>
                </nz-tree-node-option>
              </ng-container>
            </nz-tree-node>
            <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
              <ng-container *ngIf="node.groupName === group.name">
                <nz-tree-node-toggle>
                  <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
                </nz-tree-node-toggle>
                <nz-tree-node-checkbox
                  [nzDisabled]="node.disabled"
                  [nzChecked]="node.isGranted"
                  (nzClick)="selectionToggle(node)"
                ></nz-tree-node-checkbox>
                <nz-tree-node-option [nzDisabled]="node.disabled" (nzClick)="selectionToggle(node)">
                  {{ node.displayName }}
                </nz-tree-node-option>
              </ng-container>
            </nz-tree-node>
          </nz-tree-view>
        </div>
      </nz-tab>
    </nz-tabset>
  </nz-card>
</div>
<div nz-row>
  <button nz-button nzType="primary" (click)="save()" [disabled]="!getChangedPermission()?.length">
    保存
  </button>
  <button nz-button nzType="default" (click)="close()">关闭</button>
</div>
